import React, { useEffect } from "react";
import styles from "./index.module.less";
import ItemHead from "./itemHead";
import Item from "./item";
import { connect } from "react-redux";
import { getLeaveMessageRankAction } from "@redux/actions02";
import { Scrollbars } from "react-custom-scrollbars-2";

const MessageRank = (props) => {
    const { getLeaveMessageRankAction, rankObj } = props;

    useEffect(() => {
        getLeaveMessageRankAction && getLeaveMessageRankAction();
    }, [getLeaveMessageRankAction]);

    return (
        <div className={styles.message_rank}>
            <ItemHead />
            <div className={styles.rank_main}>
                <Scrollbars autoHide>
                    {rankObj &&
                        rankObj.totalRank &&
                        rankObj.totalRank.map((item, index) => {
                            return <Item key={index} item={item} />;
                        })}
                </Scrollbars>
            </div>
            {rankObj &&
                rankObj.myRank &&
                rankObj.myRank.map((item) => {
                    return (
                        <Item
                            key={item.userName + "_"}
                            item={item}
                            isMy={true}
                        />
                    );
                })}
        </div>
    );
};

export default connect(
    (state) => ({
        rankObj: state.leaveMessageRankReducer,
    }),
    { getLeaveMessageRankAction }
)(MessageRank);
